<!--# include virtual="/ceca_two/common/html/header.html"-->
<link rel="stylesheet" href="/ceca_two/css/details.css" />
<style>
	#stereogramList img,#replyStereogramList img{
		width: 100px;
		height: 100px;
		
	}
	.fright{
		float: right;
		cursor: pointer;
	}
	.fleft{
		float: left;
	}
	.imgitem{
		width: 100px;
		height: 100px;
		float: left;
	}
	.noComment{
    	text-align: center;
    	padding: 20px 0;
    	margin-top: 20px;
    	font-size: 20px;
	}
</style>
<!--banner-->
<!--# include virtual="/ceca_two/common/html/banner.html"-->

<div class="history">
	<span>当前位置：</span>
	<a href="/ceca_two/modules/index/index.html">首页</a>>
	<a href="/ceca_two/modules/software/software.html">软件推荐 </a>>
	<a onclick="location.reload(true)">软件详情</a>
</div>
<div class="w-bfb">
	<div class="content-box clearfloat" id="contentHtml"></div>

	<script id="content" type="text/html">
		<div class="left-content">
			<ul class="logo">
				<img src="{{d.  softwareLogo ||'/ceca_two/img/software.jpg'}}"/>
			</ul>
			<ul class="name">[{{#if(d.softwareArea&&(d.softwareArea.charAt(d.softwareArea.length-1)=="；")){}}{{d.softwareArea.substr("0",d.softwareArea.length-1).replace(/；/g,",")}}{{#}else if(d.softwareArea){}}{{d.softwareArea.replace(/；/g,",")}}{{#}}}]{{d.softwareName}}</ul>
			<ul class="download">
				{{#  if(d.softwareUrl){ }}<li class="fl" onclick="window.open('{{d.softwareUrl}}')" >软件下载</li>{{#  } }}
				{{#  if(d.drivenUrl){ }}<li class="fr" onclick="window.open('{{d.drivenUrl}}')">加密锁驱动下载</li>{{#  } }}
			</ul>
			<ul class="info">
				{{#  if(d.categoryName){ }}
					<li><span  data-categoryId="{{d.categoryId}}">软件分类：</span>{{d.categoryName}}</li>
				{{#  } }}
				{{#  if(d.developmentUnit){ }}
					<li class="clearfloat">
						<span style="width: 70px;float: left;">开发单位：</span>
						<i style="float: left;width: 160px;color: #333;">{{d.developmentUnit}}</i>
					</li>
				{{#  } }}
				{{#  if(d.softwareUpdateTime){ }}
					<li><span>更新时间：</span>{{d.softwareUpdateTime}}</li>
				{{#  } }}
				{{#  if(d.softwareSize){ }}
					<li><span>软件大小：</span>{{d.softwareSize}}</li>
				{{#  } }}
				{{#  if(d.operatingSystem){ }}
					<li><span>操作系统：</span>{{d.operatingSystem}}</li>
				{{#  } }}
				{{#  if(d.bitNumber){ }}
					<li><span>位&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;数：</span>{{d.bitNumber}}</li>
				{{#  } }}
				{{#  if(d.softwareArea){ }}
					<li><span>适用地区：</span>{{#if(d.softwareArea&&(d.softwareArea.charAt(d.softwareArea.length-1)=="；")){}}{{d.softwareArea.substr("0",d.softwareArea.length-1).replace(/；/g,",")}}{{#}else if(d.softwareArea){}}{{d.softwareArea.replace(/；/g,",")}}{{#}}}</li>
				{{#  } }}
				{{#  if(d.version){ }}
					<li><span>软件版本：</span>{{d.version}}</li>
				{{#  } }}
				{{#  if(d.softwarePrice){ }}
					<li><span>软件售价(元)：</span>{{d.softwarePrice}}</li>
				{{#  } }}
				{{#  if(d.discountPrice){ }}
					<li><span>会员优惠价(元)：</span>{{d.discountPrice}}</li>
				{{#  } }}
			</ul>
		</div>
		<!--右侧列表-->
		<div class="right-content">
			<div>
				<ul class="tit">软件简介</ul>
				<ul class="desc"><p>{{d.abstract}}</p></ul>
			</div>
			<div>
				<ul class="tit">软件介绍</ul>
				<ul class="desc">{{d.context}}</ul>
			</div>
			<div>
				<ul class="tit">备注</ul>
				<ul class="desc">{{d.remarks}}</ul>
			</div>
			<div class="friend">
				<ul class="tit">典型用户:</ul>
				<ul class="content">

				</ul>
			</div>
		</div>	
	</script>

</div>
<div class="comment clearfloat">
	<div class="comment-tit">
		软件评论
	</div>
	<div class="main clearfloat" id="comment-cont">
		<div class="comment-list clearfloat">
			<div class="fl">
				京享值11684
			</div>
			<div class="fr">
				<p class="desc">超级好的??钢化抗蓝光膜，红色的新年版，贴上真的非常好看，和手机?非常配，好看哒，超级有颜值的膜，我也十分喜欢?，棒棒????哒！！?????赠送的按键指纹贴也喜欢?，挺可爱的！嘻嘻！红色的也十分喜庆！！???总之就是超级爱！！！???</p>
				<div class="pic-list">
					<img src="/ceca_two/img/s1.png"/>	
					<img src="/ceca_two/img/s1.png"/>	
					<img src="/ceca_two/img/s1.png"/>	
				</div>
				<div class="time">
					2017-01-15 19:07
				</div>
			</div>
		</div>
		<div class="comment-list clearfloat">
			<div class="fl">
				京享值11684
			</div>
			<div class="fr">
				<p class="desc">超级好的??钢化抗蓝光膜，红色的新年版，贴上真的非常好看，和手机?非常配，好看哒，超级有颜值的膜，我也十分喜欢?，棒棒????哒！！?????赠送的按键指纹贴也喜欢?，挺可爱的！嘻嘻！红色的也十分喜庆！！???总之就是超级爱！！！???</p>
				<div class="time">
					2017-01-15 19:07
				</div>
			</div>
		</div>
		<div class="comment-list clearfloat">
			<div class="fl">
				京享值11684
			</div>
			<div class="fr">
				<p class="desc">超级好的??钢化抗蓝光膜，红色的新年版，贴上真的非常好看，和手机?非常配，好看哒，超级有颜值的膜，我也十分喜欢?，棒棒????哒！！?????赠送的按键指纹贴也喜欢?，挺可爱的！嘻嘻！红色的也十分喜庆！！???总之就是超级爱！！！???</p>
				<div class="pic-list">
					<img src="/ceca_two/img/s1.png"/>	
					<img src="/ceca_two/img/s1.png"/>	
					<img src="/ceca_two/img/s1.png"/>	
				</div>
				<div class="time">
					2017-01-15 19:07
				</div>
				<div class="reply">
					<p class="reply-name">图拉斯旗舰店 回复：</p>
					<p class="reply-cont">时间的笔尖，轻轻勾勒出让人措手不及的隔离带。当时光冲开我们紧握的双手时，叫做离别。我在一旁，细细聆听那一首撕心裂肺的离歌。时间冲淡了一切，却是冲不开我们紧握的双手，【图拉斯旗舰店】永远不离不弃！</p>
					<p class="reply-time">2017.05.05</p>
				</div>
			</div>
		</div>
	</div>
	<div class="fyq">
		<div id="laypage"></div>
	</div>
	
	<div class="comment-item clearfloat">
		<textarea id="commentText" rows="" cols="" placeholder="软件是否好用？快分享你的心得吧~"></textarea>
		<div class="comment-pic clearfloat">
			<div class="djsc" id="stereogram">
				<img src="/ceca_two/img/plus_film.png" alt="点击上传" title="点击上传"/>
			</div>
			<input type="hidden" class="input-text" value="" placeholder="" id="commentPic" name="commentPic">
			<div id="stereogramList"></div>
		</div>
	</div>
	<div class="determine">
		<span id="addComment">发表评论</span>
	</div>
</div>
<!--底部-->
<!--# include virtual="/ceca_two/common/html/footer.html"-->
<script type="text/html" id="commentList">
	{{#  layui.each(d, function(index, item){ }}
		<div class="comment-list clearfloat">
			<div class="fl">
				{{#  if(item.userName){ }}
					{{item.userName}}
				{{#}else{ }}
				匿名用户
				{{#}}}
			</div>
			<div class="fr">
				<p class="desc">
					{{#  if(item.commentTexts){ }}
						{{item.commentTexts}}
					{{#} }}
				</p>
				{{#  if(item.commentPic){item.commentPic=item.commentPic.split(",") }}
				<div class="pic-list">
				{{#  layui.each(item.commentPic, function(picNum, picItem){ }}
					<img src="{{picItem}}"/>	
				{{# }); }}
				</div>
				{{#}}}
				<div class="time">
					{{#  if(item.createTime){ }}
						{{item.createTime}}
					{{#} }}
				</div>
				{{#  if(item.doc&&item.doc.length){ }}
				{{#  layui.each(item.doc, function(replyIndex, replyItem){ }}
				<div class="reply">
					<p class="reply-name">
						{{#  if(replyItem.type=="0"){ }}
							{{replyItem.supplierName}}回复：{{replyItem.userName}}
						{{#}else if(replyItem.type=="1"){ }}
							{{replyItem.adminName}}回复：{{replyItem.userName}}
						{{#}else if(replyItem.type=="2"){ }}
							{{replyItem.userName}}回复：{{replyItem.supplierName}}
						{{#}else if(replyItem.type=="3"){ }}
							{{replyItem.userName}}回复：{{replyItem.adminName}}
						{{#}else{ }}
							匿名用户
						{{#} }} 
					</p>
					<p class="reply-cont">
						{{#  if(replyItem.context){ }}
							{{replyItem.context}}
						{{#} }}
					</p>
					{{#  if(replyItem.replyPic){replyItem.replyPic=replyItem.replyPic.split(",") }}
					<div class="pic-list">
					{{#  layui.each(replyItem.replyPic, function(picNum, picItem){ }}
						<img src="{{picItem}}"/>	
					{{# }); }}
					</div>
					{{#}}}
					<p class="reply-time">
						<span class="fleft">
							{{#  if(replyItem.createTime){ }}
								{{replyItem.createTime}}
							{{#} }}
						</span>
						{{#if(replyItem.type=="0"||replyItem.type=="1"){}}
						<span class="fright add_reply" onclick="add_reply(this,{{replyItem.type}},{{replyItem.commentId}},{{replyItem.createUserId}})">回复</span>
						{{#}}}
					</p>
				</div>
				{{# }); }}
				{{#} }}
			</div>
		</div>
	{{# }); }}
	{{#if(d.length<=0){}}
		<p class="noComment">该软件暂无评论</p>
	{{#}}} 
	<input type="hidden" class="input-text" value="" id="replyPic" placeholder="" name="replyPic">
</script>
</body>
</html>
<script type="text/javascript" src="/ceca_two/js/costnorm/webuploader.js"></script>
<script type="text/javascript">
var action="/guidance_service/front/soft/comment/add.do";
var obj={};
var getQueryString;
layui.use(['element','Router','Zutil','laytpl','laypage'], function(){
	var Zutil  =layui.Zutil;
	var Router = layui.Router;
	var laytpl = layui.laytpl;
	var laypage =layui.laypage;
	var Router = layui.Router;
	GetQueryString=Zutil.getQueryString;
	getList({"softwareId":Zutil.getQueryString("softwareId")});

	function getList(o){
		var get=Router.link.software.get;
		$.post(get,o,function(result){
			var  data = result.data;
			if (sessionStorage.getItem("softwareCategory")) {
				var softwareCategory  =JSON.parse(sessionStorage.getItem("softwareCategory"));
				$.each(softwareCategory, function(index,value) {
					if(softwareCategory[index].categoryId==data.categoryId)data.categoryName=softwareCategory[index].categoryName;
				});
			}
			laytpl(content.innerHTML).render(data, function(html){	
				$("#contentHtml").append(html);
			});
			
			var typical;
			try{
				typical = JSON.parse(data.typicalUser)
			}catch(e){
				typical = [];
			}
			
			for ( i = 0; i < typical.length; i++) {
				var htmlStr = "<li><img src="+typical[i][1]+"><p>"+typical[i][0]+"</p></li>";
				$(".friend .content").append(htmlStr);
			}
			
		});
	}
	
						
	getComment(1,10);
	function getComment(pageNumber,pageSize){
		var commentObj=
		{
			pageNumber:pageNumber,
			pageSize:pageSize,
			softwareId:Zutil.getQueryString("softwareId")
		}
		$.ajax({
			type : "post",
			url : "/guidance_service/front/soft/comment/getCommentWithReply.do",
			data : commentObj,
			success : function (result) {
				laytpl(commentList.innerHTML).render(result.data.list, function(html){	
					$("#comment-cont").html(html);
				});
				
				laypage({
				    cont: 'laypage'
				    ,pages: result.data.totalPage
				    ,curr:result.data.pageNumber
				    ,groups:result.data.pageSize
				    ,skin: '#ff0000'
				    ,jump: function(opt, first){
					    var curr = opt.curr;   //得到了当前页，用于向服务端请求对应数据
					    commentObj.pageNumber = curr|| 1;
					    commentObj.pageSize = result.data.pageSize || 10;
					    
					    if(!first)getComment(commentObj.pageNumber,commentObj.pageSize);
					}
				});
			},error : function () {
				layer.msg("评论加载失败！请稍候重试",{icon:2,time:3000});
			}
		});
	}

	$("#addComment").click(function(){
		picBox="#stereogramList";
		picValBox="#commentPic";
		
		var context = $("#commentText").val(),
			commentPic = $("#commentPic").val();
		
		action="/guidance_service/front/soft/comment/add.do";
		obj = {
			context:$("#commentText").val(),
			softwareId:Zutil.getQueryString("softwareId"),
			createUserId:window.localStorage.getItem("userId"),
			commentPic:$("#commentPic").val()
		};
		
		if(context == "" && commentPic == ""){
			layer.msg("您的评论不能为空",{icon:5,time:3000})
			return false;
		}
		
		addItem();
	});
});

function addReply(type,commentId,createUserId){
	var thisType;
	if(type=="0"){
		thisType="2";
	}else if(type=="1"){
		thisType="3";
	}
	action="/guidance_service/front/soft/reply/add.do";
	obj={
		context:$("#replyText").val(),
		createUserId:createUserId,
		commentPic:$("#replyPic").val(),
		commentId:commentId,
		type:thisType
	};
	addItem();
}
function calcel_reply(obj,type,commentId,createUserId){
	$(obj).addClass("add_reply").removeClass("remove_reply").html("回复").attr("onclick","add_reply(this,"+type+","+commentId+","+createUserId+")").parent(".reply-time").siblings('.comment-item,.determine').remove();
	
	picBox="#stereogramList";
	picValBox="#commentPic";
}
function add_reply(obj,type,commentId,createUserId){
	$(".reply_input_box").remove();
	$("#replyPic").val("");
	picBox="#stereogramList";
	picValBox="#commentPic";
	$(obj).addClass("remove_reply").removeClass("add_reply").html("收起").attr("onclick","calcel_reply(this,"+type+","+commentId+","+createUserId+")").parent(".reply-time").after('<div class="comment-item clearfloat reply_input_box"><textarea rows="" id="replyText" cols="" placeholder="软件是否好用？快分享你的心得吧~"></textarea><div class="comment-pic clearfloat"><div class="djsc" onclick="addReplyPic()"><img src="/ceca_two/img/plus_film.png" alt="点击上传" title="点击上传"/></div><div id="replyStereogramList"></div></div></div><div class="determine"><span onclick="addReply('+type+","+commentId+","+createUserId+')">发表回复</span></div>');
}
function addItem(){
	$.ajax({
		type:"post",
		url:action,
		data:obj,
		success:function(result){
			console.log(result)
			if (result.resultCode == 200) {
				$("#commentText").val("");
				$("#stereogramList").html("");
				layer.msg("评论提交成功，请等待管理员审核。",{icon:6,time:3000})
			}
		},
		error:function(){
			layer.msg("评论提交失败，请稍后重试",{icon:5,time:3000})
		}
	});
}
function addReplyPic(){
	picBox="#replyStereogramList";
	picValBox="#replyPic";
	$("#stereogram input[type=file]").click();
}
</script>
<script type="text/javascript">
var picBox="#stereogramList";
var picValBox="#commentPic";
$(function(){
	var uploadImgArr={};
	var uploaderPhoto;
	upManyImgFunc("#stereogram","#stereogramList","#commentPic");
	function upManyImgFunc(selector1,selector2,selector3){
		var thumbnailWidth = 287;
		var thumbnailHeight = 216;
		uploaderPhoto = WebUploader.create({  
	       // 选完文件后，是否自动上传。  
	       auto: true,  
	       // swf文件路径  
	       swf: '/supplier/js/Uploader.swf',  
	       // 文件接收服务端。  
	       server: '/admin/lib/ueditor/1.4.3/jsp/controller.jsp?action=uploadimage&encode=utf-8',
	       // 选择文件的按钮。可选。  
	       // 内部根据当前运行是创建，可能是input元素，也可能是flash.  
	       pick: selector1,  
	       // 只允许选择图片文件。  
	       accept: {  
	           title: 'Images',  
	           extensions: 'gif,jpg,jpeg,bmp,png',  
	           mimeTypes: 'image/*'  
	       },  
	   	});  
	    uploaderPhoto.on( 'fileQueued', function( file ) {
	        
		    uploaderPhoto.makeThumb( file, function( error, src ) {
		        if ( error ) {
		            $img=$('<span>不能预览</span>');
		            return;
		        }
	
		    }, thumbnailWidth, thumbnailHeight );
		});
		
		uploaderPhoto.on( 'uploadSuccess', function( file ,response) {
	    	var $imgBox=$(picBox);
	    	uploadImgArr[file.id]=file;
	        $img = $("<span class='imgitem' id='"+file.id+"'><img imgsrc='"+response.url+"' src='"+response.url+"'/><span>");
	        $img = $("<span class='imgitem' id='"+file.id+"'><i class='layui-icon delimgbtn'>&#x1006;</i><img data-index = '"+$(".imgitem").length+"' imgsrc='"+response.url+"' src='"+response.url+"'/></span>");
	        $imgBox.append($img);
		   	var length=$(picBox).find(".imgitem").length;
		   	var imgStr="";
		   	
		   	for(var i=0;i<length;i++){
		   		imgStr += $(picBox).find(".imgitem").eq(i).find("img").attr("imgsrc")+",";
		   	}	
		   	imgStr = imgStr.substr(0,imgStr.length-1);
		   	$(picValBox).val(imgStr);
		   	picBox="#stereogramList";
		   	picValBox="#commentPic";

		   	$img.find("img").on("mouseover",function(){

				var top = $(this).offset().top,
		            left = $(this).offset().left,
		            width = $(this).width(),
		            height = $(this).height(),
		            thisIndex = $(this).attr("data-index"),
		            html = "<div class='deleteImg' data-index='"+thisIndex+"'>点击删除图片</div>";
		            
	            $("body").append(html);
	            
	            $(".deleteImg").css({"position":"absolute","top":top,"left":left,"width":width,"height":height,"line-height":height+"px","background":"rgba(0,0,0,0.3)","text-align":"center","color":"#fff","cursor":"pointer"})
	            
	            $(".deleteImg").on("click",function(){
	            	var imgIndex = $(this).attr("data-index");
	            	$(this).remove();
	                $(".imgitem").eq(imgIndex).remove();
	                var imgPath = "";
	                for (i = 0 ; i < $(".imgitem").length ; i++) {
	                	var imgSrc = $(".imgitem").eq(i).find("img").attr("src") + ',';
	                	imgPath += imgSrc;
	                }
	                imgPath = imgPath.substr(0,imgPath.length-1);
	                $("#commentPic").val(imgPath);
	            }).on("mouseout",function(){
		   	    	$(".deleteImg").remove();
		   		})
		   	})
		   	
		});
		// 文件上传失败，显示上传出错。
		uploaderPhoto.on( 'uploadError', function( file ,reason ) {
			console.log(reason);
		});
		// 完成上传完了，成功或者失败，先删除进度条。
		uploaderPhoto.on( 'uploadComplete', function( file ) {
	//		console.dir(file);
		});
	}
	
	$(document).on("click",".delimgbtn",function(){
		var imgId=$(this).parent(".imgitem").attr("id");
		if((imgId)&&(uploadImgArr[imgId])){
			uploaderPhoto.removeFile(uploadImgArr[imgId]);
		}
		if($(this).parents(".comment-pic").length>0){
		   	picBox="#stereogramList";
		   	picValBox="#commentPic";
		}
		if($(this).parents(".reply").length>0){
			picBox="#replyStereogramList";
			picValBox="#replyPic";
		}
		$(this).parent(".imgitem").remove();
		var length=$(picBox).find(".imgitem").length;
	   	var imgStr="";
	   	for(var i=0;i<length;i++){
	   		imgStr += $(picBox).find(".imgitem").eq(i).find("img").attr("imgsrc")+",";
	   	}
	   	imgStr = imgStr.substr(0,imgStr.length-1);
	   	$(picValBox).val(imgStr);
	   	picBox="#stereogramList";
	   	picValBox="#commentPic";
	});
});
</script>





